<template>

  <div class="container">
    <!-- 第一部分: 头部 -->
    <div class="header shadow">
      <el-page-header @back="goBack">
        <template #content>
          <span style="font-size: 14px"> 用户详情 </span>
        </template>
      </el-page-header>
    </div>

    <div class="info shadow">
      <h4 class="InfoHeader">用户信息</h4>
      <div class="user-info">
        <p><span class="label">用户名：</span><span class="value" id="username-value">{{userInfo.username}}</span></p>
        <p><span class="label">昵称：</span><span class="value" id="nickname-value">{{userInfo.nickname}}</span></p>
        <p><span class="label">手机号：</span><span class="value" id="phone-value">{{userInfo.phone}}</span></p>
        <p><span class="label">邮箱：</span><span class="value" id="email-value">{{userInfo.email}}</span></p>
      </div>
    </div>
    <div class="roleInfo shadow">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="已关联的权限" name="first">
          <el-button disabled  type="primary" @click="addUserPermission">
            <span style="vertical-align: middle">关联策略  </span>
          </el-button>
          <el-button  disabled  type="primary" @click="deleteUserPermission">
            <span style="vertical-align: middle"> 解除策略 </span>
          </el-button>
          <el-table
              ref="multipleTable"
              :data="permissionData"
              style="width: 100%;margin-top: 10px"
              @selection-change="permissionDataChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="ID"  align="center" style="50px">
              <template #default="{ row }">
                <div>
                  <span style="vertical-align: middle; color: #1395FF; cursor: pointer;">
                    {{ row.id }}
                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="resource" label="资源"  align="center">
              <template #default="{ row }">
                <div>
              <span style="vertical-align: middle; color: #1395FF; cursor: pointer;">
                {{ row.resource }}
              </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="operation" label="操作"  align="center">
              <template #default="{ row }">
                <div>
              <span style="vertical-align: middle; color: #1395FF; cursor: pointer;">
                {{ row.operation }}
              </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="description" label="描述"  align="center">
              <template #default="{ row }">
                <div>
              <span style="vertical-align: middle; color: #1395FF; cursor: pointer;">
                {{ row.description }}
              </span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已加入的组" name="second">
          <el-table
              ref="multipleTables"
              :data="groupData"
              style="width: 100%;margin-top: 10px"
              @selection-change="groupDataChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="ID"  align="center">
              <template #default="{ row }">
                <div>
                  <span style="vertical-align: middle; color: #1395FF; cursor: pointer;">
                    {{ row.id }}
                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称"  align="center">
              <template #default="{ row }">
                <div>
              <span style="vertical-align: middle; color: #1395FF; cursor: pointer;">
                {{ row.name }}
              </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="description" label="描述"  align="center">
              <template #default="{ row }">
                <div>
              <span style="vertical-align: middle; color: #1395FF; cursor: pointer;">
                {{ row.description }}
              </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="created_at" label="创建时间"  align="center">
              <template #default="{ row }">
                <div>
              <span style="vertical-align: middle; color: #1395FF; cursor: pointer;">
                {{ row.created_at }}
              </span>
                </div>
              </template>
            </el-table-column>
          </el-table>

        </el-tab-pane>
      </el-tabs>
    </div>
  </div>

</template>

<script setup>
import router from "@/router/index.js";
import {onBeforeMount, reactive, ref} from "vue";
import {ADDUSER_GROUP, USER_DETAIL, USER_GROUP_LIST, USER_PERMISSION_LIST} from "../../../api/user.js";
const activeName = ref('first')
const multipleTable = ref()

const handleClick = (tab, event) => {
  console.log(tab, event)
}
const permissionData = ref([{
  id:'',
  resource: '',
  operation: '',
  description: '',
},])

const groupData = ref([{
  id:'',
  name: '',
  description: '',
  created_at: '',
},])
const permissionDataChange = (val) => {
  console.log(val)
  // multipleSelection.value = val
}
const groupDataChange = (val) => {
  console.log(val)
  // multipleSelection.value = val
}
const { id } = defineProps({
  id: String,
});
const addUserPermission = ()=>{

}
const deleteUserPermission = ()=>{

}
const getUserPermissions = async ()=>{
  try {
    console.log(id)
    const resp = await USER_PERMISSION_LIST(id)
    console.log("用户的权限：", resp);
    if (resp && resp.data && Array.isArray(resp.data.items)) {
      permissionData.value = resp.data.items.map((item) => ({
        id: item.id,
        resource: item.resource,
        operation: item.operation,
        description: item.description,
      }));
    }
  } catch (e) {
    console.error(e);
  }
}
const getUserGroups = async ()=>{
  try {
    console.log(id)
    const resp = await USER_GROUP_LIST(id)
    console.log("用户的组：", resp);
    if (resp && resp.data && Array.isArray(resp.data)) {
      groupData.value = resp.data.map((item) => ({
        id: item.id,
        name: item.name,
        created_at: item.created_at,
        description: item.description,
      }));
    }
  } catch (e) {
    console.error(e);
  }
}
const goBack = () => {
  router.go(-1)
}
const userInfo = ref({
  username: '',
  nickname: '',
  phone: '',
  email: ''
});

const getUserDetail = async () => {
  try {
    const resp = await USER_DETAIL(id);
    console.log("用户信息", resp);
    if (resp.code === 200) {
      userInfo.value.nickname = resp.data.nickname
      userInfo.value.username = resp.data.username
      userInfo.value.phone = resp.data.phone
      userInfo.value.email = resp.data.email
    }
  } catch (e) {
    console.error(e);
  }
  // 调用 API 关联组或者执行其他操作
};
onBeforeMount(()=>{
  getUserDetail()
  getUserPermissions()
  getUserGroups()
})

</script>

<style scoped>
.container {
  margin: 10px;
}
/* 左侧组合样式，创建按钮和搜索框靠在一起 */
.left-group {
  display: flex;
  align-items: center;
  gap: 10px; /* You can adjust the gap as needed */
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 添加此属性对子元素进行分散对齐 */
  margin-bottom: 0px;
  gap: 10px;
  padding: 10px;
  background: #FFF;
  border: 2px solid #ebeef5;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.info {
  /*display: flex;*/
  /*align-items: center;*/
  /*justify-content: space-between; !* 添加此属性对子元素进行分散对齐 *!*/
  /*gap: 10px;*/
  padding: 10px;
  height: 250px;
  background: #FFF;
  border: 2px solid #ebeef5;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.roleInfo {
  /*display: flex;*/
  /*align-items: center;*/
  /*justify-content: space-between; !* 添加此属性对子元素进行分散对齐 *!*/
  /*gap: 10px;*/
  padding: 10px;
  height: 400px;
  background: #FFF;
  border: 2px solid #ebeef5;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
/* CSS */
.label {
  color: grey;
  margin-left: 20px;
  font-size: 13px;
}

.shadow {
  /* 阴影效果的样式 */
}
.InfoHeader {
  color: #333; /* 标题颜色 */
  margin-bottom: 10px; /* 标题下边距 */
}

.label {
  color: grey; /* 标签颜色 */
  font-size: 14px; /* 标签字体大小 */
  margin-right: 5px; /* 标签右边距 */
}

.value {
  color: #333; /* 值的字体颜色 */
  font-size: 14px; /* 值的字体大小 */
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
